<html>

<head>
  <meta charset="UTF-8">
  <title>淘兴趣</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="/stylesheets/pagination.css" />
  <script type="text/javascript" src="/javascripts/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="/javascripts/bootstrap.min.js"></script>
  <style>
    .nav-link{
      margin-top: 0px;
    }
  </style>
</head>

<body>

  <% include header %>

  <div class="container" style="padding: 0 5%;">
    <div class="row mt-3">
      <div class="col-md-2">
        <div class="nav flex-column nav-pills">
          <a href="/?path=<%= queryPath %>&interests=0" class="nav-link <%= interestsId==0?'ACTIVE':'fuck' %>">全部</a>
          <% interests.forEach((item)=>{ %>
            <a href="/?path=<%= queryPath %>&interests=<%= item.id %>" class="nav-link <%= interestsId==item.id?'ACTIVE':'fuck' %>"><%= item.name %></a>
            <% }) %>
        </div>
      </div>
      <div class="col-md-10">
        <div class="card-columns">
          <% topic.forEach((item)=>{ %>
          <div class="card">
            <a href="/show_topic?id=<%= item.id %>">
              <div class="card-body">
                <h5 class="card-title"><%= item.name %></h5>
                <small class="text-muted"><%= item.subscripe_num %>订阅</small>
              </div>
              <img src="<%= item.image == 'no' ? 'images/default.jpg' : 'imageUploaded/'+item.image %>"
                class="card-img-bottom" />
            </a>
          </div>
          <% }) %>
        </div>

        <div class="middle">
          <ul class="pagination">
            <% if( pathNum < 4){ %>

            <% for(let i = pathNum ;i>0;i-- ){ %>
            <li><a href="#">«</a></li>
            <li><a href="#"> <%= pathNum - i + 1 %> </a></li>
            <li><a href="#">»</a></li>
            <% } %>

            <%}else{%>
            <li><a href="/?path=<%= parseInt(currentPathNum)-1 %>">«</a></li>
            <li><a href="/?path=<%= parseInt(currentPathNum) %>"><%= parseInt(currentPathNum) %></a></li>
            <li><a href="/?path=<%= parseInt(currentPathNum)+1 %>"><%= parseInt(currentPathNum)+1 %></a></li>
            <li><a href="/?path=<%= parseInt(currentPathNum)+2 %>"><%= parseInt(currentPathNum)+2 %></a></li>
            <li><a href="/?path=<%= parseInt(currentPathNum)+3 %>"><%= parseInt(currentPathNum)+3 %></a></li>
            <li><a href="/?path=<%= parseInt(currentPathNum)+1 %>">»</a></li>
            <%}%>
          </ul>
        </div>

      </div>
    </div>
  </div>

  <!--尾部-->
  <div class="text-center p-2 small">
    <a>服务条款</a><span>|</span>
    <a>隐私策略</a><span>|</span>
    <a>广告服务</a><span>|</span>
    <a>客服中心</a>
  </div>
  <div class="text-center p-2 small">
    淘兴趣——关注你感兴趣的人和事
  </div>

</body>

</html>